<template>
  <div id="manageItemInfo">
    <template>
      <template  style="margin-top: 15px;width: 30%">
        <el-input placeholder="物资名称" @keyup.native.enter="find(name)" v-model="name" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="find(name)"></el-button>
        </el-input>
      </template>

      <el-table
              ref="multipleTable"
              :data="itemSimpleVO"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 10px"
              :border=true>
        <el-table-column
                label="编号"
                width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index +1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="name"
                label="物资名称"
                width="250">
        </el-table-column>
        <el-table-column
                prop="itemCreate"
                label="发布时间"
                width="250">
        </el-table-column>
        <el-table-column
                width="200px"
                label="图片"
        >
          <template slot-scope="scope">
            <!--scope.row代表当前遍历的数组中的对象-->
            <el-image
                    style="width: 100px; height: 100px"
                    :src="'http://176.17.10.223:18081/' + scope.row.img"
            ></el-image>
          </template>

        </el-table-column>
        <el-table-column
                prop="inventory"
                label="库存"
                width="250">
        </el-table-column>
        <el-table-column
                prop="itemModified"
                label="最后修改时间"
                width="250">
        </el-table-column>
        <el-table-column
                label="操作"
                show-overflow-tooltip="false"
                width="200px">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-message" round="" @click="apply(scope.row)">申请</el-button>
          </template>

        </el-table-column>
      </el-table>

    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name:'',
        img:'http://176.17.10.223:8080/imgs/c8ddb553-beb6-4918-a5cf-9fa579448137.jpeg',
        itemSimpleVO: [],
        multipleSelection: [],
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        //发请求获取所有分类信息
        console.log("发送请求之前可以获取到的JWT======" + localStorage.getItem('JWT_TOKEN'))
        this.axios.post("http://176.17.10.223:18081/item/list?keyword=").then( (response)=> {
          this.itemSimpleVO = response.data.data;
        })
      },
      apply(row){
        this.$router.push("/home/item/apply?id=" + row.id)
      },
      // 查找单个用户
      find(name){
        if (name != ''){
          let url = 'http://176.17.10.223:18081/item/details'
          let data = 'name='+ name;
          this.axios.post(url,data).then( (response)=> {
            // 如果查询到的不是空数据
            if (response.data.data != null){
              // 先清空用户数组
              this.itemSimpleVO=[];
              // 清空搜索的用户
              this.name = '';
              this.itemSimpleVO[0] = response.data.data;
            }else {
              this.$message({
                message: '该用户不存在',
                type: 'error'
              });
            }
          })
        }else {
          // 当搜索的用户是空的时候  需要再执行一次方法拿到数据
          this.getData();
        }
      },
      addItem(){
        this.$router.push({path: '/admin/manage/item/add'});  //页面路由刷新
      },
    },
  }
</script>
<style>
  .el-input-group{
    margin: 0 40%;
    position: center;
    width: auto;
  }
  .el-input-group--append .el-input__inner, .el-input-group__prepend {
    width: 300px;
  }
</style>